<style lang="sass" scoped>
	
	#modelDetail{
		position: relative;
		display:flex;
		width: 100%;
		height: 100%;
		flex-direction: column;
		.banner{
			width: 100%;
			height: auto;
			img{
				display: block;
				height: auto;
				width: 100%;
				
			}
		}
		.modelInfo{
			width: 100%;
			height: 100%;
			flex: 1;		
			background: #fff;
			.modelItem{
				width: 100%;
				height: auto;
				background:#fff;				
				.title{
					width: 100%;
					position: relative;
					height: 3rem;
					line-height: 3rem;
					background: #1973bf;
					padding-left: 1rem;
					display: flex;
					-webkit-box-flex: 1;
					color: #fff;
					
					i{
						position: absolute;
						left: 0rem;
						top: 0rem;
						width: 0.3rem;
						height: 2rem;
						margin-top: -1rem;
						top:50%;
						background: #dd191d;
					}
					.cutBox{
						flex: 1;
						-webkit-box-align: end;
						-webkit-box-pack: end;
						text-align: right;						
						padding-right: 1rem;
						span{
							color: #fff;
							display: inline-block;
							width: 7rem;
							height: 2rem;
							line-height: 2rem;
							background: #dd191d;
							padding: 0 0.5rem;
							border-radius: 0.3rem;
							
						}
					}
					span{
						font-size: 1.3rem;
					}
				}
				.con{
					width: 100%;
					height: auto;										
					padding:1rem;
					dl.msg{
						width: 100%;
						min-height: 3rem;
						height:auto;
						background: #fff;
						line-height: 3rem;
						display:-webkit-box;
						font-size: 1.3rem;
						border-bottom:1px solid #e8e8e8;
						
						dt{
							width: 30%;
							height: auto;							
							background: #f2f2f2;
							text-align: center;
							color:#999;
							border-right: 1px solid #E8E8E8;
						}
						dd{							
							height: 100%;
							color: #1973bf;
							padding-left: 1rem;
							flex: 1;
						}
					}
					dl:last-child{
						border-bottom: none;
					}
				}
				.modelRecommend{
					width: 100%;
					height: auto;
					padding: 1rem;
					background: #fff;
					clear:both;
					overflow: auto; 
					zoom: 1;
					.product{
						width: 25%;
						height: 8rem;
						float: left;
						display:flex;
						flex-direction: column;
						-webkit-box-align: center;
						.img{
							width: 6rem;
							height: 6rem;
							text-align: center;
							img{
								width: 100%;
								height: auto;
								min-height: 6rem;
								margin: 0 auto;
							}							
						}
						p{
							display: block;
							height: 2rem;
							line-height: 2rem;
							font-size: 1.3rem;
							-webkit-box-flex: 1;
							width: 100%;
							text-align: center;
						}
					}
				}
				
			}
			.carModelInfo{
				width: 100%;
				height: 7rem;
				padding: 1rem;
				background: #fff;
				display:flex;
				.carModelInfo_icon{
					width: 7rem;
					height: 100%;
					margin-right:1rem;
					img{
						width: 100%;
						max-height: 100%;
						min-height: 100%;
					}
				}
				.carModelInfo_value{
					flex: 1;
					height: 100%;
					position:relative;
					p{
						width: 100%;
						height: 2rem;
						line-height: 2rem;
						overflow: hidden;
						font-size: 1.2rem;
					}
					p:first-child{
						width: 75%;
					}
					span{
					    color: #fff;
					    display: inline-block;
					    width: auto;
					    height: 2rem;
					    line-height: 2rem;
					    background: #dd191d;
					    padding: 0 0.5rem;
					    border-radius: 0.5rem;
					    position: absolute;
					    right: 0rem;
					    top: 0rem;
					    
					}
				}
			}
		}
		.notMate{
			width: 100%;
			height: 15rem;
			line-height: 15rem;
			font-size: 1.5rem;
			text-align: center;
		}
		.wslTitleLogo{
			width: 100%;
			height: 3rem;
			background: url(../../libs/images/wsx_top.jpg) no-repeat center center;
			background-size: 100% 100%;
		}
		.recommendImg{
			width: 100%;
			min-height: 8rem;
			height: auto;
			background: #fff;
			display: flex;
			div:first-child{
				width: 29.9%;
				height:3rem;
				line-height: 3rem;
				font-size: 1.3rem;
				padding-left:1rem;
				box-sizing: border-box;
			}
			div:last-child{
				flex: 1;
				text-align: left;
				box-sizing: border-box;
				-webkit-box-pack: start;
				padding-left: 1rem;
				padding: 1rem;
			    border-left: 1px solid #E8E8E8;
			    img{
			    	max-height: 8rem;
			    	max-width: 8rem;
			    	margin: 0 auto;
			    }
			}
			
		}
		.moduleBanner{
			
			p{
				width:100%;
				height:3rem;
				line-height: 3rem;
				color: #666;
				text-align:center;
				background: #F2F2F2;
			}
			img{
				width: 100%;
				height: auto;
			}
			
		}
		.redColor{
			color: #F20000;
		}
		.classifyMsg{
			width: 100%;
			height: auto;
			position: relative;
			padding: 0 1rem;
			background: #fff;
			.firstWite{
				position: absolute;
				width: 2rem;
				height: 2rem;
				border-radius: 50%;
				background: #fff;
				top: 7rem;
				left: 31%;
			}
			.secondeWite{
				position: absolute;
				width: 2rem;
				height: 2rem;
				border-radius: 50%;
				background: #fff;
				top: 7rem;
				left: 63%;
			}
			ul{
				display: flex;
				height: auto;
				flex-direction: row;
    		flex-wrap: wrap;
				justify-content: center;
				
				li{
				    width: 33.3%;
				    height: 8rem;				   
				    vertical-align: middle;				   
				    font-size: 0.8rem;				  
				    text-align: center;
				    align-items: center;
			      border-bottom: 1px solid #E8E8E8;
   					border-right: 1px solid #E8E8E8;
				    				  
					div{
						width: 100%;
						height: 5rem;
						display: flex;
						flex-direction: column;
						-webkit-box-align: center;
						-webkit-box-pack: center;	
						img{						
							width: auto;
							height: auto;								
							display: block;	
							margin: 0 auto;					
						}
					}
					
					
					span{
						display: inline-block;
						height: 2rem;
						width: 100%;
						font-weight: 600;
						line-height: 2rem;
					}
										
				}
				li:last-child{
					border-right: none;
				}
				.otherLi{
					border-bottom: none;
				}
				li.otherBorder{
					border-right: none;
				}
			}
			.clearfix:after{
				content: '';
				height:0;
				line-height: 0;
				display: block;
				visibility: hidden;
				clear: both;
			}
			
			
		}
		.bot{
			width: 100%;
			height: 1rem;
			margin-top: 1rem;
			line-height: 1rem;
			background: #1973BF;
		}
		.lodBtn{
			background: #1973BF;
			color: #fff;
			padding: 5px 10px;
		  border-radius: 3px;
		}
		
		
	}
	
</style>
<template>
	
	<div id="modelDetail">
		<div class="banner" v-if="result && result.ad.length > 0 && result.ad.length == 2" >						
			<img v-if="result.ad[1]" :src="result.ad[1].pic" />
		</div>	
		<div class="banner" v-if="result && result.ad.length > 0 && result.ad.length == 1" >						
			<img v-if="result.ad[0]" :src="result.ad[0].pic" />
		</div>	
		<div class="modelInfo" v-if="result">
			<div class="carModelInfo">
				<div class="carModelInfo_icon">					
					<img :src="result.model.iconBig" v-if="result.model.iconBig" v-touch:tap="showBigImg(result.model.iconBig)"/>
				</div>
				<div class="carModelInfo_value" v-if="brandName">
					<p>{{brandName}}{{seriesName}}</p>
					<p>{{modelName}}</p>
					<span class="iconfont icon-qiehuan" v-touch:tap="goselectModel">&nbsp;&nbsp;切换车型</span>
				</div>
				<div class="carModelInfo_value" v-else>
					<p>{{result.model.brandName}}{{result.model.seriesName}}</p>
					<p>{{result.model.modelName}}</p>
					<span class="iconfont icon-qiehuan" v-touch:tap="goselectModel">&nbsp;&nbsp;切换车型</span>
				</div>
			</div>
			<div class="modelItem" v-if="trans_type">
				<div class="title">
					<i></i>
					<span>变速箱信息</span>					
				</div>
				<div class="con">
					<div style="border: 1px solid #e8e8e8;">
						<dl class="msg">						
							<dt class="textOverflow_1">变速箱类型</dt>
							<dd style="color: #333;">{{trans_type}}</dd>
						</dl>
						<dl class="msg" >						
							<dt class="textOverflow_1"> 变速箱档位数</dt>
							<dd style="color: #333;">{{trans_shift_number}}</dd>
						</dl>
						
						<dl class="msg" v-if="result.model.trans_code">						
							<dt class="textOverflow_1">变速箱型号</dt>
							<dd style="color: #333;">{{result.model.trans_code}}</dd>
						</dl>						
					</div>
				</div>
			</div>
			<div class="modelItem" v-else>
				<div class="title">
					<i></i>
					<span>变速箱信息</span>					
				</div>
				<div class="con">
					<div style="border: 1px solid #e8e8e8;">
						<dl class="msg">						
							<dt class="textOverflow_1">变速箱类型</dt>
							<dd style="color: #333;">{{result.model.trans_type}}</dd>
						</dl>
						<dl class="msg" >						
							<dt class="textOverflow_1"> 变速箱档位数</dt>
							<dd style="color: #333;">{{result.model.trans_shift_number}}</dd>
						</dl>
						
						<dl class="msg" v-if="result.model.trans_code">						
							<dt class="textOverflow_1">变速箱型号</dt>
							<dd style="color: #333;">{{result.model.trans_code}}</dd>
						</dl>						
					</div>
				</div>
			</div>
			<!--养护信息-->
			
			<div class="modelItem" v-if="maintenanceArray">
				<div class="title">
					<i></i>
					<span>养护信息</span>					
				</div>
				<div class="con">
					<div style="border: 1px solid #e8e8e8;">
						<dl class="msg" v-for="item in maintenanceArray">						
							<dt class="textOverflow_1">{{item.title}}</dt>
							<dd  v-if="item.type != 3"  style="color: #333;">{{item.value}}</dd>
							<dd  v-if="item.type == 3 && typeof item.url == 'object'"  @click="showBigListImg(item.url)" style="text-decoration:underline">查看图片
								<img style="width: 0.01rem; height: 0.01rem;opacity: 0;" :src="item" v-for="item in item.url"/>
							</dd>
							<dd  v-if="item.type == 3 && typeof item.url != 'object'" v-touch:tap="showBigImg(item.url)" style="text-decoration:underline">查看图片
								<img style="width: 0.01rem; height: 0.01rem;opacity: 0;" :src="item.url"/>
							</dd>
							
						</dl>											
					</div>
				</div>
			</div>
			<!--产品信息-->
			<div class="modelItem" v-if="productArray && name !='saimo'">
				<div class="title">
					<i></i>
					<span>油品推荐</span>					
				</div>
				<div class="con">
					<div style="border: 1px solid #e8e8e8;">
						<template v-for="item in productArray">
							<dl class="msg"  v-if="item.type != 3">						
								<dt class="textOverflow_1" v-if="item.type !=3">{{item.title}}</dt>
								<dd v-if="item.type !=3 && item.title !='产品单价'">
									<span style="color: #333;" v-touch:tap="getProductDetail(item.value)">
										<font class="lodBtn" v-if="item.value == '查看详情'">点击{{item.value}}</font>
										<font v-else>{{item.value}}</font>
									</span>
								</dd>	
								<dd v-if="item.type !=3 && item.title =='产品单价'"><span class="redColor">￥{{item.value}}</span></dd>	
							</dl>
						</template>
						<template v-for="item in productArray">
							<div class="moduleBanner"   v-if="item.type == 3">
								<p>产品图片</p>						
								<img :src="item.url[0]"  v-if="typeof item.url == 'object'"  v-touch:tap="showBigListImg(item.url)" />
								<span v-if="typeof item.url == 'object'">
									<img style="width: 0.01rem; height: 0.01rem;" :src="item" track-by="$index"  v-for="item in item.url"/>
								</span>
								<img :src="item.url"  v-if="typeof item.url != 'object'" v-touch:tap="showBigImg(item.url)"/>
							</div>
						</template>
						
					</div>
				</div>
			</div>
			<!--分类-->
			<div class="classifyMsg" v-if="catList && catList.length>0">
				<ul class="clearfix">
					<li v-touch:tap="goCatInfo(item.catId,item.name)" v-for="item in catList" :class="{'otherBorder':item.select == 1}">
						<div>
							<img src="../../libs/images/de_HQ.png" v-lazyload="item.icon"  v-if="item.icon"/>
							<img  src="../../libs/images/de_HQ.png"   v-else/>
						</div>
						<span>{{item.name}}</span>
					</li>
				</ul>
				<i class="firstWite"></i>
				<i class="secondeWite"></i>
			</div>
			<div class="bot" v-if="catList && catList.length>0"></div>
		</div>		
		<div class="notMate" v-if="!resultFlag">抱歉！匹配不到相关车型数据。</div>
		<tips></tips>
		<loading v-if="getLoading.show"></loading>
		<!-- 新需求弹窗 -->
		<layer :layer-show.sync="layerShow" :product-code="productCode" :name="name" :code-name="codeName" v-if="layerShow"></layer>
		
	</div>
</template>

<script>
	
	
	var tipsAction = require("HQ_Actions").tips,
		tipsGetter = require("HQ_Getters").tips,
		loadingAction = require("HQ_Actions").loading,
		loadingGetter = require("HQ_Getters").loading;
	var HQ_Actions = frameScript.extend({}, [tipsAction, loadingAction], true),
		HQ_Getters = frameScript.extend({}, [tipsGetter, loadingGetter], true);	
	import { swiper, swiperSlide} from 'vue-awesome-swiper';	
	module.exports={
		init:function(){
			HQ_CALLBACK.modelDetail = {};
		},
		ready:function(){
				
				console.log(this.$route.query)		
				let targetCompany = window.location.search.split('=')[1];
				this.$set('name',targetCompany);
				console.log(this.name)
				if(this.$route.query.modelId){
					this.$set('type',2);
					HQ.callProductApi('getProduct',{
						'modelId':this.$route.query.modelId,
						'compCode':targetCompany,
						'catId':0
					},this.getByBrandVinCallBack);
				}else{
					
					this.$set('type',1);
					this.models = this.$route.query.models ? JSON.parse(this.$route.query.models): null
					console.log(this.models)
					if(this.models) {
						this.brandName = this.models[0].brand 
						this.seriesName = this.models[0].series
						this.modelName = this.models[0].model
					} else{
						HQ.callVinApi('vinv5',{'vin':this.$route.query.searchTxt},this.vinCallBackFn);
					}
					HQ.callProductApi('getProduct',{
						'vin':this.$route.query.searchTxt,
						'compCode':targetCompany,
						'catId':0
					},this.getByBrandVinCallBack);
					
				}
				HQ.callProductApi('fontpage',{'compCode':targetCompany},this.getIndexCallBack);
	
				
		},
		watch:{
			
		},
		data:function(){			
		
			this.setLoading({'show':true})			
			return{
				models: null,
				result:null,
				banners:[],
				pciArray:[],				
				maintenanceArray:null,//养护信息组
				productArray:null,// 产品信息组
				resultFlag:true,	
				checkList:[],
				type:0,            //判断当前是否是用vin查询 还是通过modelId查  1 //vin 2 model
				catList:[],         //接受分类
				name:'',
				layerShow: false,
				productCode:'', // 获取code
				codeName:'',
				brandName:'',
				seriesName:'',
				modelName :'',
				trans_type:'',
				trans_shift_number:''
			}
			
		},
		methods:{
			// value  查看详情
			getProductDetail(value){
				if (value == '查看详情') {
					this.layerShow = true
					let app = document.getElementById('app')
						app.style.overflow = 'hidden'
						
				}
			},
			
			getIndexCallBack:function(data){
				
				if(data.number == 200){				
					var data = data.result;					
					document.title = data.comp_name+'油品查询系统';
					
				}else{
					this.showTips({
						content:data.message,
						closeTimeout:2000
					});
				}
								
			},
			goCatInfo:function(catId,name){
				
				if(name !='新品赶路中'){
					switch(this.type){
						case 1:
							//通过VIN查询
							HQ.openView(HQ.PAGE_SERVER + "index.html#!/catInfo?searchTxt="+this.$route.query.searchTxt+'&catId='+catId);
						break;
						case 2:
							//通过modelId查询
							HQ.openView(HQ.PAGE_SERVER + "index.html#!/catInfo?modelId="+this.$route.query.modelId+'&catId='+catId)
						break;
					}	
				}
														
			},
			showBigListImg:function(icon){	
				
				var obj = [];			
				
				for(var i=0;i<icon.length;i++){
					obj[i] = {};
					obj[i].src = icon[i];				
					var img = document.createElement('img');
					img.src = icon[i]
					obj[i].w = parseInt(img.width);
					obj[i].h = parseInt(img.height);	
					console.log(obj[i].w);
				}				
				this.$preview.open(0, obj)
			},
			showBigImg:function(icon){	
				
				var obj = [],imgArray = [];				
				imgArray.push(icon)
				for(var i=0;i<imgArray.length;i++){
					obj[i] = {};
					obj[i].src = imgArray[i];				
					var img = document.createElement('img');
					img.src = imgArray[i]
					obj[i].w = parseInt(img.width);
					obj[i].h = parseInt(img.height);	
					console.log(obj[i].w);
				}				
				this.$preview.open(0, obj)
			},
			vinCallBackFn:function(data){
				this.setLoading({'show':false})
				if(data.number == 200){
					this.$set('result',data.result);					
					this.banners.push(this.result.iconBig);
					console.log(this.banners)
				}else{					
					this.showTips({
						content:data.message,
						closeTimeout:2000
					});
					this.resultFlag = false;
				}
			},
			//重新选择车型
			goselectModel:function(){
				HQ.openView(HQ.PAGE_SERVER + "index.html#!/modelSelect");
			},
			vinCallBackFn(data){
				console.log(data)
//				brandName:'',
//				seriesName:'',
//				modelName :'',
//				trans_type:'',
//				trans_shift_number:''
				if(data.number == 200) {
					console.log(data.result)
					this.brandName = data.result.match_models[0]? data.result.match_models[0].brand:''
					this.seriesName = data.result.match_models[0]? data.result.match_models[0].series:''
					this.modelName = data.result.match_models[0]? data.result.match_models[0].model:''
					if(data.result.vehicle_param.more && data.result.vehicle_param.more.length>0){
						data.result.vehicle_param.more.forEach((item) => {
							if(item.key == '变速器名称') {
								this.trans_type = item.value
							}
							if(item.key == '档位数') {
								this.trans_shift_number = item.value
							}
						})
					}
				}
			},
			getByBrandVinCallBack:function(data){
				console.log(data);
				this.setLoading({'show':false})
				if(data.number == 200){
					this.$set('result',data.result);	
					
					console.log(this.result);
					this.productCode = this.result.productCode ? this.result.productCode : ''
					if(this.result.params && this.result.params.length >0){
						for(let i = 0;i < this.result.params.length; i++){
							if(this.result.params[i].group_name == '养护信息'){
								this.$set('maintenanceArray',this.result.params[i].items);
							}else if(this.result.params[i].group_name == '产品信息'){
								this.$set('productArray',this.result.params[i].items);
							}
						}
						if(this.maintenanceArray){
							for(let i = 0;i < this.maintenanceArray.length;i++){
								if(typeof this.maintenanceArray[i].url == 'object'){
									this.$set('checkList',this.maintenanceArray[i].url);
								}
							}
						}
						this.codeName  = (this.productArray && this.productArray.length > 0)?this.productArray.filter((val) => {return  val.title == '产品编码'})[0].value : ''
						
					}
					
				
					if(this.result.cats && this.result.cats.length >0){
						
						for(let j = 0;j<this.result.cats.length;j++){
							if(j == 2 || j == 5 ||  j == 8 || j == 11){
								
								this.result.cats[j].select = 1;
							}
							this.catList.push(this.result.cats[j]);
						}
					
						console.log(this.catList)
					}																									
				}else{
					this.showTips({
						content:data.message,
						closeTimeout:2000
					});
				}
				
				
			},
			goModelIntroduce:function(index){
				switch(index){
					case 1:
						HQ.openView(HQ.PAGE_SERVER + "index.html#!/modelIntroduce");
						break;
					case 2:
						HQ.openView(HQ.PAGE_SERVER + "index.html#!/engineIntroduce");
						break;
				}
			}
		},
		
		components:{
			swiper,
			swiperSlide,
			layer:require("../../components/layer/layer.vue"),
			tips:require("../../components/tips/tips.vue"),
			loading:require("../../components/loading/loading.vue")	
		},
		vuex: {
			actions: HQ_Actions,
			getters: HQ_Getters
			
		},
		computed:{
			
			
		},
		
		//不再当前页就销毁当前对象下的方法
		beforeDestroy: function() {
			delete HQ_CALLBACK.modelDetail;
		}
	}
</script>